<script>
import {defineComponent} from 'vue'
import headerPage from "@/components/headerPage.vue";
import swiperPage from "@/components/swiperPage.vue";
export default defineComponent({
    name: "homePageView",
    // 在父组件中放入子组件
    components:{
        headerPage,
        swiperPage
    },
    // data为啥是一个函数的样式，是为了要进行数据分割互不影响
    data(){

    },
    methods:{
        changePage() {
            this.flag = !this.flag
            if (this.page === 'swiperPage') this.page = 'headerPage'
            else this.page = 'swiperPage'
        },
        getname(data){
            // 接收来自子组件的传值
            return console.log(data.name)
        }
    }
})
</script>

<template>
<div>
<!--  在父元素中如果使用子组件就用子组件的名字作为标签-->
<!--    这玩意智能提示居然这么写也行-->
<!--    <header-page></header-page>-->
<!--    <headerPage></headerPage>-->
<!--    <swiper-page></swiper-page>-->
<!--    <swiperPage></swiperPage>-->


<!--*** 重点  父子组件的传参    -->

    <!--*** ***  父传子-->
    <!--    一.在父组件的子标签中自动逸一个属性 -->
    <headerPage :num="200"></headerPage>
    <!--         子传父-->
    <!--    1.先在父组件的子标签里自定义一个事件 注意：是自定义 用他原来自带的比如click就不行-->
    <swiperPage @getname="getname" class="swiper"></swiperPage>
    <!--        使用component标签，来引用组件，并通过:is属性来指定要加载的组件：-->
    <!--        <button @click="changePage">changePage</button>-->
    <!--  mode  只能应用于组件-->
    <!--        <transition mode="out-in">-->
    <!--            <component :is="page"></component>-->
    <!--            <headerPage v-if="flag"></headerPage>-->
    <!--            <swiperPage v-else class="swiper"></swiperPage>-->

    <!--        </transition>-->
</div>
</template>

<style scoped lang="less">
.swiper {
    margin-top: -50px;
}
</style>